<template>
  <div>
    <div
      :id="chartId"
      :style="{ height: '380px', width: '99%' }"
    />
    <p style="margin-top: -10px; text-align: center;">评分：<em style="color: red">{{ points }}</em></p>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
    name: 'Radar',
    props: {
      chartId: {
        type: String,
        default: '',
      },
      title: {
        type: String,
        default: '',
      },
      data: {
        type: Array,
        default: () => []
      },
      points: {
        type: Number,
        required: false,
        default: 0,
      },
    },
    mounted() {
      if (this.data.length > 0) {
        this.drawChart()
      }
    },
    watch: {
      data(val) {
        if (val.length > 0) {
          this.drawChart()
        }
      }
    },
    methods: {
      drawChart() {
        let myChart = echarts.init(document.getElementById(this.chartId))
        myChart.setOption({
          title: {
            text: this.title,
            textStyle: {
              fontWeight: 'normal',
            }
          },
          tooltip: {},
          legend: {
            data: [this.title],
            show: false,
          },
          radar: {
            // shape: 'circle',
            name: {
              formatter: '{value}',
              textStyle: {
                color: '#fff',
                backgroundColor: "#017972",
                borderColor: "#017972",
                borderRadius: 3,
                padding: [3, 5],
              },
            },
            radius: '62%',
            splitLine: {
              lineStyle: {
                width: 0
              }
            },
            splitArea: {
              areaStyle: {
                color: ['#0166B3', '#0095D9', '#2ABAF0', '#60CCF4', '#A8E3F9']
              }
            },
            indicator: this.data.map(_ => {
              return {
                name: _.item,
                max: 100
              }
            }),
          },
          series: [{
            name: '',
            type: 'radar',
            // areaStyle: {normal: {}},
            data: [{
              name: this.title,
              value: this.data.map(item => item.score),
            }, ],
          }, ],
        })
      },
    }
  }
</script>